<template>
  <div class="jobMoveManage">
    <div class="searchBox">
      <div class="left">
        <label for="">姓名：</label>
        <el-input placeholder="请输入员工姓名" v-model="searchname" />
      </div>
      <el-date-picker
        style="margin-right: 8px"
        v-model="Datevalue"
        type="date"
        placeholder="请选择调度时间"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      >
        <template #default="cell">
          <span class="text">{{ cell.text }}</span>
        </template>
      </el-date-picker>
      <div class="right">
        <el-button type="primary" @click="seaUser">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
        <el-button type="primary" @click="reset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </div>
    </div>
    <common-table
      :style="{ flex: 1 }"
      :table-data="tableData"
      :columns="columns"
      :pagination="pagination"
    >
      <template #state="{ row }">
        <p>{{ row.fromDepartmentName }}</p>
        <p @click="JobTracking(row)" class="job_class">岗位追踪</p>
      </template>
    </common-table>

    <!-- 弹出框 -->
    <el-dialog v-model="centerDialogVisible" :title="joblist" center>
      <el-table :data="tableDatalist" style="width: 100%">
        <el-table-column prop="name" label="员工姓名" />
        <el-table-column prop="fromDepartmentName" label="原部门名称" width="100" />
        <el-table-column prop="toDepartmentName" label="现部门名称" />
        <el-table-column prop="toPositionName" label="原岗位名称" />
        <el-table-column prop="toPositionName" label="现岗位名称" />
        <el-table-column prop="movementDateStr" label="调度时间" />
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import CommonTable from '@/components/CommonTable.vue';
import { columns, tableDataText } from '@/views/jobMoveManage/mockData';
import { getEmployeeMovementAPI, getjobManagelistAPI } from '@/api/jobMoveManage.js';
import { onBeforeMount } from 'vue';

const searchname = ref('');
const Datevalue = ref('');
const tableData = ref([]);

const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const joblist = ref('');

const tableDatalist = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]);

const getEmployeeMovement = async () => {
  const info = await getEmployeeMovementAPI({
    name: searchname.value,
    movementDate: Datevalue.value,
    page: pagination.value.pageNum,
    limit: pagination.value.pageSize,
  });
  console.log(info.data);
  tableData.value = info.data.list;
  pagination.value.total = info.data.count * 1;
};

onBeforeMount(() => {
  getEmployeeMovement();
});

//搜索用户
const seaUser = async () => {
  const info = await getEmployeeMovementAPI({
    name: searchname.value,
    movementDate: Datevalue.value,
    page: pagination.value.pageNum,
    limit: pagination.value.pageSize,
  });
  tableData.value = info.data.list;
};

// 重置
const reset = () => {
  searchname.value = '';
  Datevalue.value = '';
  getEmployeeMovement();
};

const centerDialogVisible = ref(false);

//岗位追踪
const JobTracking = async (row) => {
  centerDialogVisible.value = true;
  joblist.value = row.name + '岗位追踪列表';
  const info = await getjobManagelistAPI({ employeeId: row.employeeId });
  console.log(info.data);
  tableDatalist.value = info.data.list;
  console.log(row.employeeId);
  console.log('岗位追踪', row);
};

const setPage = (v) => {
  pagination.value.pageNum = v;
  getEmployeeMovement();
};

const setSize = (v) => {
  pagination.value.pageNum = 1;
  pagination.value.pageSize = v;
  getEmployeeMovement();
};

defineExpose({
  setPage,
  setSize,
});
</script>

<style scoped lang="less">
.addDialog_input {
  width: 280px;
}

.job_class {
  color: #0f59a4;
}
.job_class:hover {
  color: #134857;
  font-size: 20px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.jobMoveManage {
  background-color: #ffffff;
  flex: 1;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

// .mx-1 {
//   background-color: red;
//   color: #999;
//   border: none;
// }
.searchBox {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 32px;

  margin: 16px 0;

  .left {
    display: flex;
    align-items: center;
    margin-right: 18px;
  }

  label {
    width: 60px;
    font-size: 14px;
    color: #999999;
    margin-right: 3px;
  }
}

.dialog_con {
  height: 55vh;
  overflow: auto;
  position: relative;
}
.example-pagination-block {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.find {
  margin-bottom: 20px;
  padding-left: 10px;
}
.diainput {
  width: 200px;
  margin-right: 20px;
}

.addDialog_input {
  width: 280px;
}
</style>
